<template>
	<view class="">
		<view class="head">
			<view class="gateback-btn">
				<uni-icons custom-prefix="iconfont" type="icon-left" size="26" color="#111" @click="$u.route({type:'back'})"/>
			</view>
			<view class="">
				<view>我的钱包</view>
				<view class="flex justify-between align-center">
					<view>
						<view>
							<text class="fsize-50 fweigh-600">{{ frontPrice }}</text>
							<text class="fsize-32 fweigh-600" v-show="isDot">.</text>
							<text class="fsize-32 fweigh-600">{{ backPrice }}</text>
						</view>
						<view class="mt-20 flex align-center" @click="$u.route('/pages/user/wallet/bill')">
							<text class="mr-30">明细</text>
							<uni-icons custom-prefix="iconfont" type="icon-right" size="12"/>
						</view>
					</view>
					<u-avatar size="75" src="https://wx.qlogo.cn/mmopen/vi_32/Hx7MFkCEmZVHziaTTiaHSiaCs4ApnH5CD0nYOhOg1nYUUMYtxMXkL6L4VL5icRfO5w4LGzW5ib0FZicwj2MficyYfZgCw/132"></u-avatar>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="pt-30 pb-30">
				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in amountList" :key="index">
						<view class="amount-item" :class="seleIndex === index? 'amount-item-selected':''" @click="onAmount(item, index)">
							<view class="fsize-24">
								<text class="fsize-50 fweigh-600">{{item.label}}</text>
								<text>元</text>
							</view>
							<view>余额</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<view class="padding-30">
				<view class="fweigh-600">充值规则</view>
				<view class="mt-30 fsize-22 flex flex-column lh-40 line-gray-6">
					<text>1、充值规则1充值规则1充值规则1充值规则1充值规则1充值规则1充值规则1</text>
					<text>2、充值规则2充值规则2充值规则2充值规则2充值规则2充值规则2充值规则2充值规则2充值规则2充值规则2充值规则2</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button text-color="#111" text="立即充值" color="linear-gradient(rgba(243, 196, 93, 1), rgba(237, 172, 47, 1))" size="large" shape="circle"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data (){
			return {
				frontPrice:'',
				backPrice:'',
				isDot: true,
				seleIndex: -1,
				seleValue: null,
				amountList: [
					{label:'100', value: 100 },
					{label:'200', value: 200 },
					{label:'300', value: 300 },
					{label:'400', value: 400 },
					{label:'500', value: 500 }
				]
			}
		},
		onShow() {
			this.totalprice(338.65)
		},
		methods: {
			onAmount(row, ix){
				if(this.seleIndex === ix) return
				this.seleIndex = ix
				this.seleValue = row.value
			},
			totalprice(amount) {
				let num = amount.toString()
				if(!isNaN(num)){ 
					this.isDot = ( (num + '').indexOf('.') != -1 ); 
				}
				if (this.isDot) {
					let splitPrice = num.split(".");
					this.frontPrice = splitPrice[0]
					this.backPrice = splitPrice[1]
				} else {
					this.frontPrice = num
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		width: 750rpx;
		height: 470rpx;
		background: linear-gradient(34deg, #F3C45D, #EDAC2F);
		padding: 217rpx 30rpx 0 30rpx;
		position: relative;
		.gateback-btn{
			position: absolute;
			left: 20rpx;
			top: 110rpx;
		}
	}
	.amount-item{
		width: 206rpx;
		height: 182rpx;
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		border: 1px #fff solid;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
		&-selected{
			color: #F3C45D;
			border-color: #F3C45D;
		}
	}
	.footer{
		width: 750rpx;
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
	}
</style>